<template>
  <div class="container">
    <el-row gutter="10">
      <el-col :span="12"
        ><div class="box mb-1">
          <div class="title">评分</div>
          <div class="chartsBox" id="echarts01"></div></div
      ></el-col>
      <el-col :span="12"
        ><div class="box mb-1">
          <div class="title">内存容量</div>
          <div class="chartsBox" id="echarts02"></div></div
      ></el-col>
    </el-row>
    <el-row gutter="10">
      <el-col :span="12"
        ><div class="box">
          <div class="title">颜色分析</div>
          <div class="chartsBox" id="echarts03"></div>
        </div>
      </el-col>

      <el-col :span="12"
        ><div class="box">
          <div class="title">评论分析</div>
          <div class="chartsBox" id="echarts04"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted, ref } from "vue";

onMounted(() => {
  setecharts();
});

function setecharts() {
  var echarts01 = echarts.init(document.getElementById("echarts01"));
  var echarts02 = echarts.init(document.getElementById("echarts02"));
  var echarts03 = echarts.init(document.getElementById("echarts03"));
  var echarts04 = echarts.init(document.getElementById("echarts04"));

  var option01 = {
    grid: {
      top: "25%",
      left: "5%",
      right: "10%",
      bottom: "5%",
      containLabel: true
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        crossStyle: {
          color: "#999"
        }
      }
    },
    dataZoom: [
      {
        type: "inside", // 类型为内置型，可以通过鼠标滚轮进行缩放
        xAxisIndex: [0], // 对第一个 x 轴有效
        start: 0, // 开始位置
        end: 80 // 结束位置
      }
    ],
    legend: {
      show: false,
      type: "scroll",
      top: "5%"
    },
    color: ["#5470c6", "#bd1a2d", "#91cc75", "#fac858", "#ee6666"],
    xAxis: [
      {
        type: "category",
        name: "日期",
        nameLocation: "end", // 将 x 轴的名称显示在右边
        nameGap: 30, // 调整名称与轴线之间的距离
        data: ["10.25", "10.26", "10.27", "10.28", "10.29", "10.30", "10.31"],
        axisPointer: {
          type: "shadow"
        },
        axisTick: {
          show: false // 隐藏 x 轴刻度线上的刻度
        }
      }
    ],
    yAxis: [
      {
        type: "value",
        splitLine: {
          show: true,
          lineStyle: {
            color: "#333"
          }
        }
      },
      {
        name: "数量",
        type: "value",
        position: "left",
        splitLine: {
          show: true,
          lineStyle: {
            color: "#eef"
          }
        }
      }
    ],
    series: [
      {
        name: "数量",
        type: "line",
        smooth: true, // 将折线改成平滑曲线
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function(value) {
            return value;
          }
        },
        data: [14, 27, 26, 19, 18, 12, 6],
        lineStyle: {
          width: 3, // 设置曲线宽度
          color: "#5470c6" // 曲线颜色
        },
        areaStyle: {
          // 设置区域底色
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#5470c6"
            },
            {
              offset: 1,
              color: "#fff"
            }
          ])
        }
      }
    ]
  };

  var option02 = {
    grid: {
      top: "25%",
      left: "5%",
      right: "10%",
      bottom: "5%",
      containLabel: true
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        crossStyle: {
          color: "#999"
        }
      }
    },
    dataZoom: [
      {
        type: "inside", // 类型为内置型，可以通过鼠标滚轮进行缩放
        xAxisIndex: [0], // 对第一个 x 轴有效
        start: 0, // 开始位置
        end: 80 // 结束位置
      }
    ],
    legend: {
      show: false,
      type: "scroll",
      top: "5%"
    },
    color: ["#bd1a2d", "#5470c6", "#91cc75", "#fac858", "#ee6666"],
    xAxis: [
      {
        type: "category",
        name: "日期",
        nameLocation: "end", // 将 x 轴的名称显示在右边
        nameGap: 30, // 调整名称与轴线之间的距离
        data: ["10.25", "10.26", "10.27", "10.28", "10.29", "10.30", "10.31"],
        axisPointer: {
          type: "shadow"
        },
        axisTick: {
          show: false // 隐藏 x 轴刻度线上的刻度
        }
      }
    ],
    yAxis: [
      {
        type: "value",
        splitLine: {
          show: true,
          lineStyle: {
            color: "#333"
          }
        }
      },
      {
        name: "数量",
        type: "value",
        position: "left",
        splitLine: {
          show: true,
          lineStyle: {
            color: "#eef"
          }
        }
      }
    ],
    series: [
      {
        name: "数量",
        type: "line",
        smooth: true, // 将折线改成平滑曲线
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function(value) {
            return value;
          }
        },
        data: [42, 37, 27, 39, 16, 12, 36],
        lineStyle: {
          width: 3, // 设置曲线宽度
          color: "#bd1a2d" // 曲线颜色
        },
        areaStyle: {
          // 设置区域底色
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#bd1a2d"
            },
            {
              offset: 1,
              color: "#fff"
            }
          ])
        }
      }
    ]
  };

  var option03 = {
    grid: {
      top: "25%",
      left: "5%",
      right: "10%",
      bottom: "5%",
      containLabel: true
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        crossStyle: {
          color: "#999"
        }
      }
    },
    dataZoom: [
      {
        type: "inside", // 类型为内置型，可以通过鼠标滚轮进行缩放
        xAxisIndex: [0], // 对第一个 x 轴有效
        start: 0, // 开始位置
        end: 80 // 结束位置
      }
    ],
    legend: {
      show: false,
      type: "scroll",
      top: "5%"
    },
    color: ["#91cc75", "#bd1a2d", "#5470c6", "#fac858", "#ee6666"],
    xAxis: [
      {
        type: "category",
        name: "日期",
        nameLocation: "end", // 将 x 轴的名称显示在右边
        nameGap: 30, // 调整名称与轴线之间的距离
        data: ["10.25", "10.26", "10.27", "10.28", "10.29", "10.30", "10.31"],
        axisPointer: {
          type: "shadow"
        },
        axisTick: {
          show: false // 隐藏 x 轴刻度线上的刻度
        }
      }
    ],
    yAxis: [
      {
        type: "value",
        splitLine: {
          show: true,
          lineStyle: {
            color: "#333"
          }
        }
      },
      {
        name: "数量",
        type: "value",
        position: "left"
      }
    ],
    series: [
      {
        name: "数量",
        type: "line",
        smooth: true, // 将折线改成平滑曲线
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function(value) {
            return value;
          }
        },
        data: [4, 7, 21, 9, 16, 12, 6],
        lineStyle: {
          width: 3, // 设置曲线宽度
          color: "#91cc75" // 曲线颜色
        },
        areaStyle: {
          // 设置区域底色
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#91cc75"
            },
            {
              offset: 1,
              color: "#fff"
            }
          ])
        }
      }
    ]
  };

  var option04 = {
    color: ["#2CAA3F", "#8E35FF", "#FFB933", "#FF317B", "#fbc300"],
    grid: {
      top: "5%",
      left: "5%",
      right: "5%",
      bottom: "5%",
      containLabel: true
    },
    tooltip: {
      show: true,
      trigger: "item", // 触发类型设为'item'
      formatter: function(params) {
        return (
          params.marker +
          params.value +
          "人<br>" +
          params.name +
          "：" +
          params.percent +
          "%"
        );
      }
    },
    legend: {
      orient: "vertical",
      top: "8%",
      left: "8%",
      borderRadius: 4,
      textStyle: {
        color: "#000",
        fontSize: 14
      }
    },
    series: [
      {
        name: "",
        type: "pie",
        radius: ["40%", "85%"],
        center: ["50%", "50%"],
        data: [
          { value: 1048, name: "大人" },
          { value: 735, name: "小孩" }
        ],
        itemStyle: {
          normal: {
            borderWidth: 2, // 设置边框宽度，即项目之间的间隔大小
            borderColor: "#fff"
          }
        },
        label: {
          show: true,
          normal: {
            show: true,
            formatter: "{b}: ({d}%)",
            color: "auto", // 使用当前图表的颜色
            textStyle: {
              fontSize: 14 // 设置字体大小
            }
          },
          emphasis: {
            label: {
              show: true,
              color: "auto" // 使用当前图表的颜色
            }
          }
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)"
          }
        }
      }
    ]
  };

  echarts01.setOption(option01);
  echarts02.setOption(option02);
  echarts03.setOption(option03);
  echarts04.setOption(option04);
  window.addEventListener("resize", function() {
    echarts01.resize();
    echarts02.resize();
    echarts03.resize();
    echarts04.resize();
  });
}
</script>

<style scoped>
.container {
  background: #e8e8e8;
  padding: 1vh;
  height: 100vh;
  width: 100vw;
  box-sizing: border-box;
}
.box {
  width: 100%;
  height: 48.5vh;
  background: rgb(255, 255, 255);
  border-radius: 10px;
  overflow: hidden;
}
.mb-1 {
  margin-bottom: 1vh;
}
.title {
  width: 100%;
  height: 5vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background: pink; */
}
.chartsBox {
  width: 100%;
  height: 43vh;
  /* background: #dc4747; */
}
</style>
